<template>
    <div class="container">
        <div class="card">
            <div class="top">
                <span class="left">{{ title }}</span>
                <span class="right" @click="openMorePage(title)">查看更多<i class="el-icon-arrow-right"></i></span>
            </div>
            <div class="bottom">
                <div class="item" v-for="(item,index) in apps" :key="index" @click="openDetailPage(item.id)">
                    <div class="box">
                        <img class="app-icon" :src="item.icon">
                        <span class="app-name">{{item.name}}</span>
                        <div class="btn">

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
let _this = null
export default {
    name: 'HorizonalAppCard',
    props: {
        title: {
            type: String,
            default: '标题'
        },
        apps: {
            type: Array,
            default: () => {
                return []
            }
        }
    },
    created() {
        _this = this
    },
    methods: {
        openDetailPage: (id) => {
            document.documentElement.scrollTop = 0
            _this.$router.push({
                name: 'AppDetail',
                params: {
                    id: id
                }
            }, () => {
                location.reload()
            })
        },
        openMorePage: (title) => {
            document.documentElement.scrollTop = 0
            _this.$router.push({
                name: 'More',
                params: {
                    title: title
                }
            }, () => {
                location.reload()
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.container {
    width: 968px;
    margin: auto;
    border-bottom: 1px solid #f2f2f2;

    .card {
        margin-top: 24px;

        .top {
            .left {
                font-size: 20px;
                text-overflow: ellipsis;
                font-weight: bold;
            }

            .right {
                opacity: 0.6;
                font-weight: 400;
                cursor: pointer;
                float: right;
            }
        }

        .bottom {
            display: flex;
            justify-content: space-between;
            margin: auto;
            margin-top: 24px;

            .item {
                cursor: pointer;
                width: 121px;
                display: flex;
                justify-content: center;

                .app-icon {
                    width: 72px;
                    height: 72px;
                    border-radius: 12px;
                }

                .app-name {
                    margin-top: 5px;
                    font-size: 13px;
                    text-align: center;
                }

                .btn {
                    height: 40px;
                }

                .box {
                    display: flex;
                    flex-direction: column;
                    width: 72px;
                    align-items: center;
                    transition: all 0.35s ease-in-out;
                }

                .box:hover {
                    transform: scale(1.2);
                }
            }
        }
    }
}
</style>